import React from 'react';
import {Text,View,Image,PanResponder,StatusBar} from 'react-native';
import styles from  './style';
import Icon from 'react-native-vector-icons/Ionicons';
import Utils from  '../utils';

class MoveableCircle extends  React.Component{
    constructor(){
        super();
        this.state={
            color:'rgba(255,255,255,0.7)'
        }
    }

    _previousLeft = Utils.size.width/2-40;
    _previousTop = Utils.size.height/2-40;
    _maxTop = Utils.size.height-110;
    _maxLeft = Utils.size.width -98;

    _circleStyles={};
    circle =(null : ?{ setNativeProps(props: Object): void });
    // circle ;

    _updatePosition(){
    this.circle && this.circle.setNativeProps(this._circleStyles);

    }
    _endMove(evt,gestureState){
        this._previousLeft += gestureState.dx;
        this._previousTop += gestureState.dy;
        this.setState({
            color:'rgba(255,255,255,0.7)'
        });
    }
    componentWillMount(){
        this._panResponder = PanResponder.create({
            onStartShouldSetResponder:(evt,gestureState)=>true,
            onStartShouldSetResponderCapture:(evt,gestureState)=>true,
            onMoveShouldSetResponder:(evt,gestureState)=>true,
            onMoveShouldSetResponderCapture:(evt,gestureState)=>true,
            onPanResponderGrant:(evt,gestureState)=>{this.setState({color:'white'})},
            onPanResponderMove:(evt,gestureState)=>{
                this._circleStyles.style.left = this._previousLeft+gestureState.dx;
                this._circleStyles.style.top = this._previousTop+gestureState.dy;
                if(this._circleStyles.style.left<0){
                    this._circleStyles.style.left =0;
                }
                if(this._circleStyles.style.top<5){
                    this._circleStyles.style.top =5;
                }

                if(this._circleStyles.style.left>this._maxLeft){
                    this._circleStyles.style.left =this._maxLeft;
                }
                if(this._circleStyles.style.left>this._maxTop){
                    this._circleStyles.style.left =this._maxTop;
                }
            },
            onPanResponderTerminationRequest: (evt, gestureState) => true,
            onPanResponderRelease: (evt, gestureState) => this._endMove(evt, gestureState),
            onPanResponderTerminate: (evt, gestureState) => this._endMove(evt, gestureState),
        });
        this._circleStyles={
            style: {
                left: this._previousLeft,
                top: this._previousTop,
            },
        };
    };


    componentDidMount(){
        this._updatePosition();
    }
    render(){
    return(<View ref={(circle) => {this.circle = circle;}} style={styles.MoveableCircle}  {...this._panResponder.panHandlers}>
        <Icon ref="baseball" name="ios-baseball" color={this.state.color}  size={120}></Icon>
        </View>);
    //
}
}

export default class extends React.Component{
    componentWillMount() {
        // StatusBar.setBarStyle('default');//ios
    }
    render(){
        // <Image source={require('./img/agrass.png')} style={styles.bg}></Image>

        return(<View style={styles.container}>
            <Icon ref="baseball1" name="ios-baseball" color={'red'} size={120}></Icon>

        </View>)
        // <View style={styles.circleContainer}>
        // <MoveableCircle></MoveableCircle>
        //     </View>
    }
}